<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/nanoscroller.css">
    <link rel="stylesheet" type="text/css" href="css/bubbles.css">
    <link rel="stylesheet" type="text/css" href="css/blog.css">


    
</head>
<body>
    <div class="nano">
        <div class="nano-content">
            <div class="square-wrapper">
                <ul class="bg-bubbles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            
            <div class="user-face-area">
                <img id="left-wing" src="img/wl.png"></img>
                <div class="user-face-img-area">
                    <img src="face.jpg" width="200px" id="face"></img>
                    <div id="user-name">剃切绘里奈</div>
                    <div id="user-desc">难吃死啦~~难吃死啦~~难吃死啦~~</div>
                </div>
                <img id="right-wing" src="img/wr.png"></img>
            </div>    
            
            <div class="card-area">
                <div class='ribbon'>
                    <a href="#"><span>网站首页</span></a>
                    <a href="#"><span>分类浏览</span></a>
                    <a href="#"><span>标签墙</span></a>
                    <a href="#"><span>时间轴</span></a>
                    <a href="#"><span>关于作者</span></a>
                </div>
            </div>
            
            <style>
                .tag-area {
                    width: 100%;
                    min-height: 550;
                    box-shadow: 0 5px 20px #999999;
                    padding: 25px;
                }
                
                .tag-area a {
                    display: inline-block;
                    position: relative;
                    margin-left: 1em;
                    border-radius: 0;
                    padding: 0px 10px;
                    background: #ccc;
                    color: #000;
                    font-weight: bold;
                    font-size: 0.5em;
                    text-decoration: none;
                    line-height: 1.5em;
                }

                .tag-area a:hover {
                    background: #000;
                    color: #ccc;                    
                }

                .tag-area a:before {
                    position: absolute;
                    top: 0;
                    left: -1.5em;
                    height: 0em;
                    width: 0em;                    
                    content: " ";
                    border: transparent 0.75em solid;
                    border-right-color: #ccc;
                }

                .tag-area a:hover:before {
                    border-right-color: #000;
                }

                .tag-area a:after {
                    position: absolute;
                    width: 0.5em;
                    height: 0.5em;
                    top: 0.5em;
                    left: -0.125em;
                    border-radius: 0.25em;                    
                    content: " ";
                    background: #fff;
                }                
                
            </style>
            
            <div class="list-area">
                <div class="tag-area">

                </div>
            </div>  
            <footer></footer>
        </div>
    </div>
    

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.nanoscroller.min.js"></script>

    <script>
    
        $(function() {
            
            /* 滚动条 */
            $('.nano').nanoScroller(); 
        }); 
          
    </script>
</body>
</html>